<template>
  <div>
    <!-- 不能值 -->
    <a-modal style="min-width: 900px; top: 5vh" class="event-modal" :footer="null" :visible="isShow"
      @cancel="cancelSend">
      <div>
        <!-- 渲染的表格 -->
        <a-table class="ant-table-striped" size="small" :columns="columns" :data-source="eventdata" :row-class-name="
          (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
        ">
          <template #name="{ record }">
            <a-button type="primary" ghost @click="pass(record)">通过</a-button>
            &nbsp&nbsp
            <a-button type="primary" danger ghost @click="ignore(record)">忽略</a-button>
          </template>
        </a-table>
      </div>
      <template #title>
        <div ref="modalTitleRef" style="width: 100%; cursor: move">
          用户事件审核
        </div>
      </template>
      <template #modalRender="{ originVNode }">
        <div :style="transformStyle">
          <component :is="originVNode" />
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
import axios from "axios";
import { message } from "ant-design-vue";
import {
  ref,
  computed,
  watch,
  watchEffect,
  reactive,
  onMounted,
  toRefs,
} from "vue";
/* 实现拖拽 */
import { useDraggable } from "@vueuse/core";
/* 接收组件 */
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
});
/* 拿到父组件的数据 */
let { isShow } = toRefs(props);

const emit = defineEmits(["changeIsShow"]);
/* 点击取消隐藏表单 */
function cancelSend() {
  console.log(11);
  // isShow.value = false;
  emit("changeIsShow", false);
}

const columns = ref([
  {
    title: "ID",
    dataIndex: "user_id",
    key: "user_id",
  },
  {
    title: "事件类型",
    dataIndex: "event_type",
    key: "event_type",
    width: '80px'
  },
  {
    title: "事件地址",
    dataIndex: "event_addr",
    key: "event_addr",
  },
  {
    title: "附近建筑",
    dataIndex: "event_mark",
    key: "event_mark",
  },
  {
    title: "发生时间",
    dataIndex: "event_time",
    key: "event_time",
    width: '150px'
  },
  {
    title: "事件描述",
    dataIndex: "event_descibe",
    key: "event_descibe",
  },
  {
    title: "操作",
    dataIndex: "btn",
    key: "btn",
    slots: { customRender: "name" }, //绑定插槽
    width: '160px'
  },
]);
const eventdata = ref([]);
const data = ref([]);
/* 初始化表格数据 */
const initData = () => {
  axios.get("http://localhost:3000/gg_event").then((res) => {
    // console.log(res.data.result);
    eventdata.value = res.data.result;
  });
}
onMounted(() => {
  initData()
});
watch(isShow, () => {
  initData()
})
//点击通过
function pass(e) {
  // console.log(e);
  // console.log(e.user_id);
  const json = {
    event_id: e.event_id,
    user_id: e.user_id,
    event_status: 2,
  };
  axios.put("http://localhost:3000/gg_event", json).then((res) => {
    /* 审核通过 */
    message.success("已通过")
    initData()
  });

}
//点击忽略
function ignore(e) {
  const json = {
    event_id: e.event_id,
    user_id: e.user_id,
    event_status: 1,
  };
  axios.put("http://localhost:3000/gg_event", json).then((res) => {
    /* 审核通过 */
    message.success("已忽略")
    initData()
  });
}
/* ------------------------------------------------ */

// const columns = ref [{
//     title: 'Name',
//     dataIndex: 'name',
// }, {
//     title: 'Age',
//     dataIndex: 'age',
// }, {
//     title: 'Address',
//     dataIndex: 'address',
// }];
// const columns = ref([])
// const data = ref([])

// const handleOk = e => {
//     console.log(fldNames.value);
//     console.log( features.value);
//     console.log("ok");
//     // visible.value = false;
//     fldNames.value.map(item => {
//         columns.value.push({
//             title: item,
//             dataIndex: item
//         })
//     })
//     features.value.map((item, index) => {
//         console.log(item.AttValue);
//         const res = item.AttValue
//         data.value.push({
//             key: index,
//             事件编号: res[0],
//             事件类型: res[1],
//             事件等级: res[2],
//             发生时间: res[3],
//             发生地点: res[4],
//             车牌号: res[5],
//             驾驶员: res[6],
//             处理状态: res[7],
//             mpLayer: res[8],
//         })
//     })
// };

/* ------------------------------------ */
const modalTitleRef = ref(null);
/* const showModal = () => {
    visible.value = true;
}; */
const { x, y, isDragging } = useDraggable(modalTitleRef);

const startX = ref(0);
const startY = ref(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
});
watch([x, y], () => {
  if (!startedDrag.value) {
    startX.value = x.value;
    startY.value = y.value;
    const bodyRect = document.body.getBoundingClientRect();
    const titleRect = modalTitleRef.value.getBoundingClientRect();
    dragRect.value.right = bodyRect.width - titleRect.width;
    dragRect.value.bottom = bodyRect.height - titleRect.height;
    preTransformX.value = transformX.value;
    preTransformY.value = transformY.value;
  }
  startedDrag.value = true;
});
watch(isDragging, () => {
  if (!isDragging) {
    startedDrag.value = false;
  }
});
watchEffect(() => {
  if (startedDrag.value) {
    transformX.value =
      preTransformX.value +
      Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
      startX.value;
    transformY.value =
      preTransformY.value +
      Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
      startY.value;
  }
});
const transformStyle = computed(() => {
  return {
    transform: `translate(${transformX.value}px, ${transformY.value}px)`,
  };
});
</script>
<style scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
<style>
.ant-pagination {
  position: unset !important;
}
</style>
